<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="title">两层菜单：</div>
      </template>
      <bs-menu :data="data1" defaultActive="1"></bs-menu>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="title">无限级菜单：</div>
      </template>
      <bs-infinite-menu :data="data2" defaultActive="1"></bs-infinite-menu>
    </el-card>
  </div>
</template>

<script lang='ts' setup>
let data1 = [
  {
    name: '导航一',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航二',
    index: '2',
    icon: 'Document'
  },
  {
    name: '导航三',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航三-1',
        index: '3-1',
        icon: 'Document',
      },
      {
        name: '导航三-2',
        index: '3-2',
        icon: 'Document',
      }
    ]
  }

]
let data2 = [
  {
    name: '导航一',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航二',
    index: '2',
    icon: 'Document'
  },
  {
    name: '导航三',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航三-1',
        index: '3-1',
        icon: 'Document',
        children: [
          {
            name: '导航三-1-1',
            index: '3-1-1',
            icon: 'Document',
            children: [
              {
                name: '导航三-1-1-1',
                index: '3-1-1-1',
                icon: 'Document',

              },
              {
                name: '导航三-1-1-2',
                index: '3-1-1-2',
                icon: 'Document',
              }
            ]
          },
          {
            name: '导航三-1-2',
            index: '3-1-2',
            icon: 'Document',
          }
        ]
      },
      {
        name: '导航三-2',
        index: '3-2',
        icon: 'Document',
      }
    ]
  }

]
</script>
<style lang="scss" scoped>
</style>